<template>
    <div class="nav">
        <div class="px-[10px] flex justify-center items-center">
            <template v-for="(item, index) in nav" :key="index">
                <NuxtLink
                    v-if="!item?.hidden"
                    :to="getLink(item)"
                    class="nav-item"
                    :class="{
                        active: currentIndex === index
                    }"
                    :target="
                        typeof getLink(item) == 'string' ? '_blank' : '_self'
                    "
                    @click="currentIndex = index"
                >
                    <img
                        class="h-[16px] object-cover"
                        :src="
                            currentIndex === index
                                ? item.selected
                                : item.unselected
                        "
                    />
                    <div class="ml-[5px] font-bold line-clamp-1">
                        {{ item.name.replace('AI','') }}
                    </div>
                </NuxtLink>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useAppStore } from '~/stores/app'
const route = useRoute()
const currentIndex = ref(-1)
const appStore = useAppStore()
const nav = computed(() => {
    return (
        appStore.getTabbarConfig.nav
            ?.filter((item: any) => item.is_show == '1')
            .map((item: any) => {
                return {
                    ...item,
                    selected: appStore.getImageUrl(item.selected),
                    unselected: appStore.getImageUrl(item.unselected)
                }
            }) || []
    )
})
const routeIndex = nav.value.findIndex((nav) => {
    const routePath =
        route.path === '/' ? route.path : route.path.replace(/\/$/, '')
    return (
        nav.link?.path === route.meta.activePath || nav.link?.path === routePath
    )
})
if (routeIndex !== -1) {
    currentIndex.value = routeIndex
}

const getLink = (item: any) => {
    if (item.link?.type == 'custom') {
        return item.link?.query?.url
    } else {
        return {
            path: item.link?.path,
            query: item.link?.query
        }
    }
}
</script>

<style lang="scss" scoped>
.nav {
    .nav-item {
        @apply text-btn-text;
        border-radius: 14px;
        display: flex;
        align-items: center;
        height: 28px;
        margin: 20px 15px;
        padding: 4px 15px;
        font-size: 18px;
        &.active {
            @apply text-btn-text;
            background: linear-gradient( 180deg, #FFB26B 0%, #FF5F1B 100%), linear-gradient( 220deg, rgba(255,226,170,0.68) 0%, rgba(255,149,72,0) 40%), linear-gradient( 238deg, rgba(255,68,68,0) 51%, #FF4444 98%), #D9D9D9;
        }
    }
}
</style>
